<template>
	<div class="wrapper">
		<v-head></v-head>
		<el-container style="color:#fff">
			<el-main>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:0px">1.城市轨道交通内部牵引供电系统由 <el-input v-model="input.input1.input11" placeholder=""></el-input>、<el-input
									 v-model="input.input1.input12" placeholder=""></el-input> 和 <el-input v-model="input.input1.input13"
									 placeholder=""></el-input> 组成。</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>2.在城市轨道交通牵引供电系统中，由馈电线、<el-input v-model="input.input2.input21" placeholder=""></el-input> 、轨道回路及
									<el-input v-model="input.input2.input22" placeholder=""></el-input> 组成的供电网络称为牵引网系统。</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>3.在城市轨道交通牵引供电系统中，电能从 <el-input v-model="input.input3.input31" placeholder=""></el-input>
									经馈电线和接触网输送给电动列车，再从电动列车经
									<el-input v-model="input.input3.input32" placeholder="" style="width:200px"></el-input>、<el-input v-model="input.input3.input33"
									 placeholder=""></el-input>
									流回。</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">4.城市轨道交通牵引供电系统整流器全部采用的整流方式为( )</div>
								<el-radio v-model="radio.radio4" v-bind:disabled="isDisabled.disabled1" label="1">单相半波</el-radio>
								<el-radio v-model="radio.radio4" v-bind:disabled="isDisabled.disabled1" label="2">单相全波</el-radio>
								<el-radio v-model="radio.radio4" v-bind:disabled="isDisabled.disabled1" label="3">三相全波桥式</el-radio>
								<el-radio v-model="radio.radio4" v-bind:disabled="isDisabled.disabled1" label="4">三相半波</el-radio>
							</div>                                                          
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">5.城市轨道交通牵引供电系统直流输出侧为1500V时，最低不能低于( )</div>
								<el-radio v-model="radio.radio5" v-bind:disabled="isDisabled.disabled2" label="1">1000V</el-radio>
								<el-radio v-model="radio.radio5" v-bind:disabled="isDisabled.disabled2" label="2">500V</el-radio>
								<el-radio v-model="radio.radio5" v-bind:disabled="isDisabled.disabled2" label="3">1500V</el-radio>
								<el-radio v-model="radio.radio5" v-bind:disabled="isDisabled.disabled2" label="4">750V</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>6.城市轨道交通系统接触网的供电方式有 <el-input v-model="input.input6.input61" placeholder=""></el-input>、<el-input v-model="input.input6.input62"
									 placeholder=""></el-input>、<el-input v-model="input.input6.input63" placeholder=""></el-input>、<el-input
									 v-model="input.input6.input64" placeholder=""></el-input>。</div>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">7.下面属于单边供电方式的优点的有( )</div>
								<el-checkbox-group v-model="checkList.checkList7">
									<el-checkbox label="1">供电分区电气独立，运行灵活</el-checkbox>
									<el-checkbox label="2">故障范围小</el-checkbox>
									<el-checkbox label="3">牵引变电所馈线保护装置较简单</el-checkbox>
									<el-checkbox label="4">每个供电分区只从一端牵引变电所获得电能</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">8.城市轨道交通供电系统最常用的供电方式为( )</div>
								<el-radio v-model="radio.radio8" v-bind:disabled="isDisabled.disabled3" label="1">单边供电方式</el-radio>
								<el-radio v-model="radio.radio8" v-bind:disabled="isDisabled.disabled3" label="2">双边供电方式</el-radio>
								<el-radio v-model="radio.radio8" v-bind:disabled="isDisabled.disabled3" label="3">大双边供电方式</el-radio>
								<el-radio v-model="radio.radio8" v-bind:disabled="isDisabled.disabled3" label="4">Tee型供电方式</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">9.只能用作临时紧急供电的供电方式为( )</div>
								<el-radio v-model="radio.radio9" v-bind:disabled="isDisabled.disabled4" label="1">单边供电方式</el-radio>
								<el-radio v-model="radio.radio9" v-bind:disabled="isDisabled.disabled4" label="2">双边供电方式</el-radio>
								<el-radio v-model="radio.radio9" v-bind:disabled="isDisabled.disabled4" label="3">大双边供电方式</el-radio>
								<el-radio v-model="radio.radio9" v-bind:disabled="isDisabled.disabled4" label="4">Tee型供电方式</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">10.馈线发生故障由相邻供电段供电的供电方式为( )</div>
								<el-radio v-model="radio.radio10" v-bind:disabled="isDisabled.disabled5" label="1">单边供电方式</el-radio>
								<el-radio v-model="radio.radio10" v-bind:disabled="isDisabled.disabled5" label="2">双边供电方式</el-radio>
								<el-radio v-model="radio.radio10" v-bind:disabled="isDisabled.disabled5" label="3">大双边供电方式</el-radio>
								<el-radio v-model="radio.radio10" v-bind:disabled="isDisabled.disabled5" label="4">Tee型供电方式</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">11.以下哪项不属于列车运行阻力( )</div>
								<el-radio v-model="radio.radio11" v-bind:disabled="isDisabled.disabled6" label="1">基本阻力</el-radio>
								<el-radio v-model="radio.radio11" v-bind:disabled="isDisabled.disabled6" label="2">列车起动阻力</el-radio>
								<el-radio v-model="radio.radio11" v-bind:disabled="isDisabled.disabled6" label="3">列车附加阻力</el-radio>
								<el-radio v-model="radio.radio11" v-bind:disabled="isDisabled.disabled6" label="4">列车制动阻力</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>12.按照列车动能转移方式分类，列车制动方式可分为 <el-input v-model="input.input12.input121" placeholder=""></el-input> 和
									<el-input v-model="input.input12.input122" placeholder=""></el-input>。</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>13.摩擦制动方式包括 <el-input v-model="input.input13.input131" placeholder=""></el-input> 、<el-input v-model="input.input13.input132"
									 placeholder=""></el-input>
									和 <el-input v-model="input.input13.input133" placeholder=""></el-input>；动力制动方式包括
									<el-input v-model="input.input13.input134" placeholder=""></el-input> 和 <el-input v-model="input.input13.input135"
									 placeholder=""></el-input> 。</div>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">14.制动系统中的（）由动能转化为电能</div>
								<el-radio v-model="radio.radio14" v-bind:disabled="isDisabled.disabled7" label="1">摩擦制动</el-radio>
								<el-radio v-model="radio.radio14" v-bind:disabled="isDisabled.disabled7" label="2">电阻制动</el-radio>
								<el-radio v-model="radio.radio14" v-bind:disabled="isDisabled.disabled7" label="3">盘形制动</el-radio>
								<el-radio v-model="radio.radio14" v-bind:disabled="isDisabled.disabled7" label="4">磁轨制动</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">15.以下哪项不属于列车运行阻力( )</div>
								<el-radio v-model="radio.radio15" v-bind:disabled="isDisabled.disabled8" label="1">闸瓦制动</el-radio>
								<el-radio v-model="radio.radio15" v-bind:disabled="isDisabled.disabled8" label="2">电阻制动</el-radio>
								<el-radio v-model="radio.radio15" v-bind:disabled="isDisabled.disabled8" label="3">电磁制动</el-radio>
								<el-radio v-model="radio.radio15" v-bind:disabled="isDisabled.disabled8" label="4">再生制动</el-radio>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>16.电动汽车电能补充可以分为 <el-input v-model="input.input16.input161" placeholder=""></el-input> 模式和 <el-input
									 v-model="input.input16.input162" placeholder=""></el-input> 模式，其中，后一种又称为 <el-input v-model="input.input16.input163"
									 placeholder=""></el-input> 。</div>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>17.电动车的充电方式包括 <el-input v-model="input.input17.input171" placeholder=""></el-input> 和 <el-input v-model="input.input17.input172"
									 placeholder=""></el-input>
									。</div>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">18.以下属于常规充电方式的有( )</div>
								<el-checkbox-group v-model="checkList.checkList18">
									<el-checkbox label="1">阶段充电方法</el-checkbox>
									<el-checkbox label="2">恒电压充电方法</el-checkbox>
									<el-checkbox label="3">变电流充电方法</el-checkbox>
									<el-checkbox label="4">变电流间歇充电方法</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div style="margin-bottom:20px">19.以下属于快速充电方式的有( )</div>
								<el-checkbox-group v-model="checkList.checkList19">
									<el-checkbox label="1">阶段充电方法</el-checkbox>
									<el-checkbox label="2">脉冲式充电方法</el-checkbox>
									<el-checkbox label="3">恒电流充电方法</el-checkbox>
									<el-checkbox label="4">变电流间歇充电方法</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="20">
						<div class="grid-content bg-purple">
							<div class="card">
								<div>20.电动汽车有序充电控制一般以 <el-input v-model="input.input20.input201" placeholder=""></el-input> 和 <el-input v-model="input.input20.input202"
									 placeholder=""></el-input> 为控制变量，以 <el-input v-model="input.input20.input203" placeholder=""></el-input> 或
									<el-input v-model="input.input20.input204" placeholder=""></el-input> 为目标，协调电动汽车充电过程。</div>
							</div>
						</div>
					</el-col>
				</el-row>

				<el-row>
					<el-button type="primary" @click="commit=true;calculateResults();isCommit = true">提交</el-button>
					<el-button type="primary" @click="isShow">正确答案</el-button>
				</el-row>

			</el-main>

			<el-aside width="500px">
				<div class="wrap" v-if="show">
					<ul>
						<li>1.
							<p :class="[ input.input1.input11 == inputAnswer.input1.input11 ? 'green' : 'red' ]">牵引变电站系统</p>、
							<p :class="[ input.input1.input12 == inputAnswer.input1.input12 ? 'green' : 'red' ]">牵引网系统</p>、
							<p :class="[ input.input1.input13 == inputAnswer.input1.input13 ? 'green' : 'red' ]">机车系统</p>
						</li>
						<li>2.
							<p :class="[ input.input2.input21 == inputAnswer.input2.input21 ? 'green' : 'red' ]">接触网</p>、
							<p :class="[ input.input2.input22 == inputAnswer.input2.input22 ? 'green' : 'red' ]">回流线</p>
						</li>
						<li>3.
							<p :class="[ input.input3.input31 == inputAnswer.input3.input31 ? 'green' : 'red' ]">牵引变电所</p>、
							<p :class="[ input.input3.input32 == inputAnswer.input3.input32 ? 'green' : 'red' ]">钢轨</p>、
							<p :class="[ input.input3.input33 == inputAnswer.input3.input33 ? 'green' : 'red' ]">回流线</p>
						</li>                                                            
						<li>4.
							<p :class="[ radio.radio4 == radioAnswer.radio4 ? 'green' : 'red' ]">C</p>
						</li>
						<li>5.
							<p :class="[ radio.radio5 == radioAnswer.radio5 ? 'green' : 'red' ]">A</p>
						</li>
						<li>6.
							<p :class="[ input.input6.input61 == inputAnswer.input6.input61 ? 'green' : 'red' ]">单边供电方式</p>、
							<p :class="[ input.input6.input62 == inputAnswer.input6.input62 ? 'green' : 'red' ]">双边供电</p>、
							<p :class="[ input.input6.input63 == inputAnswer.input6.input63 ? 'green' : 'red' ]">大双边供电方式</p>、
							<p :class="[ input.input6.input64 == inputAnswer.input6.input64 ? 'green' : 'red' ]">Tee型供电方式</p>
						</li>
						<li>7.
							<p :class="[ (checkList.checkList7[0] == '1'||checkList.checkList7[0] == '2'||checkList.checkList7[0] == '3')&&
							(checkList.checkList7[1] == '1'||checkList.checkList7[1] == '2'||checkList.checkList7[1] == '3')&&
							(checkList.checkList7[2] == '1'||checkList.checkList7[2] == '2'||checkList.checkList7[2] == '3')
							 ? 'green' : 'red' ]">ABC</p>
						</li>
						<li>8.
							<p :class="[ radio.radio8 == radioAnswer.radio8 ? 'green' : 'red' ]">B</p>
						</li>
						<li>9.
							<p :class="[ radio.radio9 == radioAnswer.radio9 ? 'green' : 'red' ]">A</p>
						</li>
						<li>10.
							<p :class="[ radio.radio10 == radioAnswer.radio10 ? 'green' : 'red' ]">D</p>
						</li>
						<li>11.
							<p :class="[ radio.radio11 == radioAnswer.radio11 ? 'green' : 'red' ]">D</p>
						</li>
						<li>12.
							<p :class="[ input.input12.input121 == inputAnswer.input12.input121 ? 'green' : 'red' ]">摩擦制动方式</p>、
							<p :class="[ input.input12.input122 == inputAnswer.input12.input122 ? 'green' : 'red' ]">动力制动方式</p>
						</li>
						<li>13.
							<p :class="[ input.input13.input131 == inputAnswer.input13.input131 ? 'green' : 'red' ]">闸瓦制动</p>、
							<p :class="[ input.input13.input132 == inputAnswer.input13.input132 ? 'green' : 'red' ]">盘形制动</p>、
							<p :class="[ input.input13.input133 == inputAnswer.input13.input133 ? 'green' : 'red' ]">磁轨制动</p>、
							<p :class="[ input.input13.input134 == inputAnswer.input13.input134 ? 'green' : 'red' ]">电阻制动</p>、
							<p :class="[ input.input13.input135 == inputAnswer.input13.input135 ? 'green' : 'red' ]">再生制动</p>
						</li>
						<li>14.
							<p :class="[ radio.radio14 == radioAnswer.radio14 ? 'green' : 'red' ]">B</p>
						</li>
						<li>15.
							<p :class="[ radio.radio15 == radioAnswer.radio15 ? 'green' : 'red' ]">D</p>
						</li>
						<li>16.
							<p :class="[ input.input16.input161 == inputAnswer.input16.input161 ? 'green' : 'red' ]">充电</p>、
							<p :class="[ input.input16.input162 == inputAnswer.input16.input162 ? 'green' : 'red' ]">换电</p>、
							<p :class="[ input.input16.input163 == inputAnswer.input16.input163 ? 'green' : 'red' ]">机械充电</p>
						</li>
						<li>17.
							<p :class="[ input.input17.input171 == inputAnswer.input17.input171 ? 'green' : 'red' ]">常规充电方式</p>、
							<p :class="[ input.input17.input172 == inputAnswer.input17.input172 ? 'green' : 'red' ]">快速充电方式</p>
						</li>
						<li>18.
							<p :class="[ (checkList.checkList18[0] == '1' && checkList.checkList18[1] == '2')||(checkList.checkList18[0] == '2' && checkList.checkList18[1] == '1') ? 'green' : 'red' ]">AB</p>
						</li>
						<li>19.
							<p :class="[ (checkList.checkList19[0] == '2' && checkList.checkList19[1] == '4')||(checkList.checkList19[0] == '4' && checkList.checkList19[1] == '2') ? 'green' : 'red' ]">BD</p>
						</li>
						<li>20.
							<p :class="[ input.input20.input201 == inputAnswer.input20.input201 ? 'green' : 'red' ]">充电时间</p>、
							<p :class="[ input.input20.input202 == inputAnswer.input20.input202 ? 'green' : 'red' ]">充电功率</p>、
							<p :class="[ input.input20.input203 == inputAnswer.input20.input203 ? 'green' : 'red' ]">经济最优</p>、
							<p :class="[ input.input20.input204 == inputAnswer.input20.input204 ? 'green' : 'red' ]">对电网影响最小</p>
						</li>
					</ul>
				</div>
			</el-aside>
			
			<el-dialog :before-close="handleClose" width="30%" class="achievement" title='答题成绩' :visible.sync="commit">
				<div class="text item">您的成绩为<p style="display: inline;">{{grade}}</p>分</div>
				<el-row>
					<el-button type="primary" @click="commit=false;grade=0">确定</el-button>
				</el-row>
			</el-dialog>
		</el-container>
	</div>
</template>

<script>
	import vHead from './Header.vue';
	export default {
		components: {
			vHead
		},
		data() {
			return {
				show:false,
				commit: false,
				isCommit:false,
				isDisabled:{
					disabled1:false,
					disabled2:false,
					disabled3:false,
					disabled4:false,
					disabled5:false,
					disabled6:false,
					disabled7:false,
					disabled8:false
				},
				grade: 0,
				checkList: {
					checkList7: [],
					checkList18: [],
					checkList19: [],
				},
				radio: {
					radio4: '',
					radio5: '',
					radio8: '',
					radio9: '',
					radio10: '',
					radio11: '',
					radio14: '',
					radio15: '',
				},
				input: {
					input1: {
						input11: '',
						input12: '',
						input13: ''
					},
					input2: {
						input21: '',
						input22: ''
					},
					input3: {
						input31: '',
						input32: '',
						input33: ''
					},
					input6: {
						input61: '',
						input62: '',
						input63: '',
						input64: ''
					},
					input12: {
						input121: '',
						input122: ''
					},
					input13: {
						input131: '',
						input132: '',
						input133: '',
						input134: '',
						input135: '',
					},
					input16: {
						input161: '',
						input162: '',
						input163: '',
					},
					input17: {
						input171: '',
						input172: ''
					},
					input20: {
						input201: '',
						input202: '',
						input203: '',
						input204: ''
					}
				},
				checkListAnswer: {
					checkList7: ["1", "2", "3"],
					checkList18: ["1", "2"],
					checkList19: ["2", "4"],
				},
				radioAnswer: {
					radio4: '3',
					radio5: '1',
					radio8: '2',
					radio9: '1',
					radio10: '4',
					radio11: '4',
					radio14: '2',
					radio15: '4',
				},
				inputAnswer: {
					input1: {
						input11: '牵引变电站系统',
						input12: '牵引网系统',
						input13: '机车系统'
					},
					input2: {
						input21: '接触网',
						input22: '回流线'
					},
					input3: {
						input31: '牵引变电所',
						input32: '钢轨',
						input33: '回流线'
					},
					input6: {
						input61: '单边供电方式',
						input62: '双边供电',
						input63: '大双边供电方式',
						input64: 'Tee型供电方式'
					},
					input12: {
						input121: '摩擦制动方式',
						input122: '动力制动方式'
					},
					input13: {
						input131: '闸瓦制动',
						input132: '盘形制动',
						input133: '磁轨制动',
						input134: '电阻制动',
						input135: '再生制动',
					},
					input16: {
						input161: '充电',
						input162: '换电',
						input163: '机械充电',
					},
					input17: {
						input171: '常规充电方式',
						input172: '快速充电方式'
					},
					input20: {
						input201: '充电时间',
						input202: '充电功率',
						input203: '经济最优',
						input204: '对电网影响最小'
					}
				},
				inputCompare: [
					{
						input: [{
							input1: '牵引变电站系统',
						},
						{
							input1: '牵引网系统',
						},
						{
							input1: '机车系统',
						}]
					},
					{
						input: [{
							input1: '接触网',
						},
						{
							input1: '回流线',
						}]
					},
					{
						input: [{
							input1: '牵引变电所',
						},
						{
							input1: '钢轨',
						},
						{
							input1: '回流线',
						}]
					},
					{
						input: [{
							input1: '单边供电方式',
						},
						{
							input1: '双边供电',
						},
						{
							input1: '大双边供电方式',
						},
						{
							input1: '型供电方式',
						}]
					},
					{
						input: [{
							input1: '摩擦制动方式',
						},
						{
							input1: '动力制动方式',
						}]
					},	
					{
						input: [{
							input1: '闸瓦制动',
						},
						{
							input1: '盘形制动',
						},
						{
							input1: '磁轨制动',
						},
						{
							input1: '电阻制动',
						},
						{
							input1: '再生制动',
						}]
					},	
					{
						input: [{
							input1: '充电',
						},
						{
							input1: '换电',
						},
						{
							input1: '机械充电',
						}]
					},	
					{
						input: [{
							input1: '常规充电方式',
						},
						{
							input1: '快速充电方式',
						}]
					},	
					{
						input: [{
							input1: '充电时间',
						},
						{
							input1: '充电功率',
						},
						{
							input1: '经济最优',
						},
						{
							input1: '对电网影响最小',
						}]
					},
				]
			}
		},
		methods: {
			handleClose(){
				this.commit= false;
				this.grade=0;
				this.isCommit = true;
			},
			isShow(){
				if(this.isCommit==true){
					this.show = true;
					
					let index = document.getElementsByTagName('input').length;
					let index1 = document.getElementsByClassName('el-radio__original').lentgh;
					for(let i = 0;i<index;i++){
						document.getElementsByTagName('input')[i].readOnly=true;
						document.getElementsByTagName('input')[i].disabled=true
					}
					for(let i = 0;i<index1;i++){
						document.getElementsByClassName('el-radio__original').readOnly=true;
						document.getElementsByClassName('el-radio__original')[i].disabled=true
					}
					this.isDisabled.disabled1 = 'disabled';
					this.isDisabled.disabled2 = 'disabled';
					this.isDisabled.disabled3 = 'disabled';
					this.isDisabled.disabled4 = 'disabled';
					this.isDisabled.disabled5 = 'disabled';
					this.isDisabled.disabled6 = 'disabled';
					this.isDisabled.disabled7 = 'disabled';
					this.isDisabled.disabled8 = 'disabled';
					
					console.log(document.getElementsByClassName('el-radio__original'))
				}
				
			},
			calculateResults() {
				let _this = this;
				let inputContent = this.input;
				let inputAnswer = this.inputAnswer;

				let radioContent = this.radio;
				let radioAnswer = this.radioAnswer;
				
				let checkListContent = this.checkList;
				let checkListAnswer = this.checkListAnswer;

				let num3 = 0;

				function calculateInput(inputContent, inputAnswer) {
					if (inputContent == inputAnswer) {
						_this.grade += 45;
						return
					}
					if (inputContent.input1.input11 == inputAnswer.input1.input11 ||
						inputContent.input1.input11 == inputAnswer.input1.input12 ||
						inputContent.input1.input11 == inputAnswer.input1.input13) {
						num3 += 1;
					}
					if (inputContent.input1.input12 != inputContent.input1.input11 &&
						(inputContent.input1.input12 == inputAnswer.input1.input11 ||
							inputContent.input1.input12 == inputAnswer.input1.input12 ||
							inputContent.input1.input12 == inputAnswer.input1.input13)) {
						num3 += 1;
					}
					if ((inputContent.input1.input13 != inputContent.input1.input11 &&
							inputContent.input1.input13 != inputContent.input1.input12) &&
						(inputContent.input1.input13 == inputAnswer.input1.input11 ||
							inputContent.input1.input13 == inputAnswer.input1.input12 ||
							inputContent.input1.input13 == inputAnswer.input1.input13)) {
						num3 += 1;
					}
					if (num3 == 0) {
						_this.grade += 0
					} else if (num3 == 1) {
						_this.grade += 2
					} else if (num3 == 2) {
						_this.grade += 4
					} else if (num3 == 3) {
						_this.grade += 5
					}
					num3 = 0;
					if (inputContent.input3.input31 == inputAnswer.input3.input31) {
						num3 += 1;
					}
					if (inputContent.input3.input32 != inputContent.input3.input32) {
						num3 += 1;
					}
					if (inputContent.input3.input33 != inputContent.input3.input33) {
						num3 += 1;
					}
					if (num3 == 0) {
						_this.grade += 0
					} else if (num3 == 1) {
						_this.grade += 2
					} else if (num3 == 2) {
						_this.grade += 4
					} else if (num3 == 3) {
						_this.grade += 5
					}

					num3 = 0;
					if (inputContent.input6.input61 == inputAnswer.input6.input61 ||
						inputContent.input6.input61 == inputAnswer.input6.input62 ||
						inputContent.input6.input61 == inputAnswer.input6.input63 ||
						inputContent.input6.input61 == inputAnswer.input6.input64) {
						num3 += 1;
					}
					if (inputContent.input6.input62 != inputContent.input6.input61 &&
						(inputContent.input6.input62 == inputAnswer.input6.input61 ||
							inputContent.input6.input62 == inputAnswer.input6.input62 ||
							inputContent.input6.input62 == inputAnswer.input6.input63 ||
							inputContent.input6.input61 == inputAnswer.input6.input64)) {
						num3 += 1;
					}
					if ((inputContent.input6.input63 != inputContent.input6.input61 &&
							inputContent.input6.input63 != inputContent.input6.input62) &&
						(inputContent.input6.input63 == inputAnswer.input6.input61 ||
							inputContent.input6.input63 == inputAnswer.input6.input62 ||
							inputContent.input6.input63 == inputAnswer.input6.input63 ||
							inputContent.input6.input61 == inputAnswer.input6.input64)) {
						num3 += 1;
					}

					if ((inputContent.input6.input64 != inputContent.input6.input61 &&
							inputContent.input6.input64 != inputContent.input6.input62 &&
							inputContent.input6.input64 != inputContent.input6.input63) &&
						(inputContent.input6.input64 == inputAnswer.input6.input61 ||
							inputContent.input6.input64 == inputAnswer.input6.input62 ||
							inputContent.input6.input64 == inputAnswer.input6.input63 ||
							inputContent.input6.input64 == inputAnswer.input6.input64)) {
						num3 += 1;
					}

					num3 = 0;
					if (inputContent.input16.input161 == inputAnswer.input16.input161 ||
						inputContent.input16.input161 == inputAnswer.input16.input162) {
						num3 += 1;
					}
					if (inputContent.input16.input162 != inputContent.input16.input161 &&
						(inputContent.input16.input162 == inputAnswer.input16.input161 ||
							inputContent.input16.input162 == inputAnswer.input16.input162)) {
						num3 += 1;
					}
					if (inputContent.input16.input163 != inputContent.input16.input163) {
						num3 += 1;
					}
					if (num3 == 0) {
						_this.grade += 0
					} else if (num3 == 1) {
						_this.grade += 2
					} else if (num3 == 2) {
						_this.grade += 4
					} else if (num3 == 3) {
						_this.grade += 5
					}


					if (inputContent.input2.input21 == inputAnswer.input2.input21 ||
						inputContent.input2.input21 == inputAnswer.input2.input22) {
						_this.grade += 2.5
					}
					if (inputContent.input2.input22 != inputContent.input2.input21 &&
						(inputContent.input2.input22 == inputAnswer.input2.input21 ||
							inputContent.input2.input22 == inputAnswer.input2.input22)) {
						_this.grade += 2.5
					}

					if (inputContent.input12.input121 == inputAnswer.input12.input121 ||
						inputContent.input12.input121 == inputAnswer.input12.input122) {
						_this.grade += 2.5
					}
					if (inputContent.input12.input122 != inputContent.input12.input121 &&
						(inputContent.input12.input122 == inputAnswer.input12.input121 ||
							inputContent.input12.input122 == inputAnswer.input12.input122)) {
						_this.grade += 2.5
					}

					if (inputContent.input13.input131 == inputAnswer.input13.input131 ||
						inputContent.input13.input131 == inputAnswer.input13.input132) {
						_this.grade += 1
					}
					if (inputContent.input13.input132 != inputContent.input13.input131 &&
						(inputContent.input13.input132 == inputAnswer.input13.input131 ||
							inputContent.input13.input132 == inputAnswer.input13.input132 ||
							inputContent.input13.input132 == inputAnswer.input13.input133)) {
						_this.grade += 1
					}
					if ((inputContent.input13.input133 != inputContent.input13.input131 &&
							inputContent.input13.input133 != inputContent.input13.input132) &&
						(inputContent.input13.input133 == inputAnswer.input13.input131 ||
							inputContent.input13.input133 == inputAnswer.input13.input132 ||
							inputContent.input13.input133 == inputAnswer.input13.input133)) {
						_this.grade += 1
					}
					if (inputContent.input13.input131 == inputAnswer.input13.input131 ||
						inputContent.input13.input131 == inputAnswer.input13.input132) {
						_this.grade += 1
					}
					if (inputContent.input13.input132 != inputContent.input13.input131 &&
						(inputContent.input13.input132 == inputAnswer.input13.input131 ||
							inputContent.input13.input132 == inputAnswer.input13.input132)) {
						_this.grade += 1
					}

					if (inputContent.input17.input171 == inputAnswer.input17.input171 ||
						inputContent.input17.input171 == inputAnswer.input17.input172) {
						_this.grade += 2.5
					}
					if (inputContent.input17.input172 != inputContent.input17.input171 &&
						(inputContent.input17.input172 == inputAnswer.input17.input171 ||
							inputContent.input17.input172 == inputAnswer.input17.input172)) {
						_this.grade += 2.5
					}

					if (inputContent.input20.input201 == inputAnswer.input20.input201 ||
						inputContent.input20.input201 == inputAnswer.input20.input202) {
						_this.grade += 1.25
					}
					if (inputContent.input20.input202 != inputContent.input20.input201 &&
						(inputContent.input20.input202 == inputAnswer.input20.input201 ||
							inputContent.input20.input202 == inputAnswer.input20.input202)) {
						_this.grade += 1.25
					}

					if (inputContent.input20.input203 == inputAnswer.input20.input203 ||
						inputContent.input20.input203 == inputAnswer.input20.input204) {
						_this.grade += 1.25
					}
					if (inputContent.input20.input203 != inputContent.input20.input203 &&
						(inputContent.input20.input203 == inputAnswer.input20.input203 ||
							inputContent.input20.input203 == inputAnswer.input20.input204)) {
						_this.grade += 1.25
					}
				}

				function calculateRadio(radioContent, radioAnswer) {
					if (radioContent == radioAnswer) {
						_this.grade += 40;
						return
					}
					let a = Object.values(radioContent);
					let b = Object.values(radioAnswer);
					let newArray = [];
					for (let i = 0; i < a.length; i++) {
						if (a[i] == b[i]) {
							newArray.push(a[i])
						}
					}
					let num = newArray.length;
					_this.grade += 5*num;
				}

				function calculateCheckList(checkListContent, checkListAnswer) {
					if (checkListContent == checkListAnswer) {
						_this.grade += 15;
						return
					}
					if(checkListContent.checkList7.sort().toString() == checkListAnswer.checkList7.sort().toString()){
						_this.grade += 5
					}
					if(checkListContent.checkList18.sort().toString() == checkListAnswer.checkList18.sort().toString()){
						_this.grade += 5
					}
					console.log(checkListContent.checkList18)
					console.log(checkListAnswer.checkList18)
					if(checkListContent.checkList19.sort().toString() == checkListAnswer.checkList19.sort().toString()){
						_this.grade += 5
					}
				}
				
				calculateInput(inputContent, inputAnswer);
				calculateRadio(radioContent, radioAnswer);
				calculateCheckList(checkListContent, checkListAnswer)
			},
		
			showAnswer(){
				
			},
		}
	}
</script>
<style scoped="scoped">
	body .wrapper {
		background-image: url(../../assets/img/background.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-header {
		margin: 0 auto;
		margin-top: 50px;
		width: 90%;
		color: #00FFFF;
		line-height: 50px;
		font-size: 22px;
		height: 100px !important;
		background-image: url(../../assets/img/carExper/content.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-container {
		width: 100%;
		height: 92%;
		background-image: url(../../assets/img/metroExper/testBack.png);
		background-size: 99% 100%;
		margin-left: 15px;
		background-repeat: no-repeat;
		padding: 30px;
	}

	.el-main {
		width: 95%;
		margin-left:4.5%
	}
	
	.el-main::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 10px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
	}
	
	.el-main::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgb(30,101,148)
	}
	
	.el-main::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: transparent;
	
	}

	.card {
		padding-top: 30px;
	}

	.el-input {
		width: auto;
	}

	.card>>>input.el-input__inner {
		border: none;
		border-bottom: 1px solid #20A0FF;
		background-color: transparent;
		color: #fff;
		font-size: 18px;
	}

	.el-radio {
		color: #fff;
	}

	.el-checkbox {
		color: #fff;
	}

	.card>>>.el-checkbox__inner,.card>>>.el-radio__input.is-disabled .el-radio__inner {
		background-color: rgb(12, 72, 116);
		border-color: rgb(33, 119, 183);

	}

	.card>>>.el-checkbox__inner::after{
		border: 1px solid #00FFFF!important;
		border-left: 0;
		border-top: 0;
	}

	.el-button.el-button--default.el-button--small,
	.el-button.el-button--primary.el-button--small {
		width: 80px;
		background-image: url(../../assets/img/button_blue.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
		margin-top: 50px;
	}

	.el-button.el-button--default.el-button--small:hover,
	.el-button.el-button--primary.el-button--small:hover {
		width: 80px;
		background-image: url(../../assets/img/button_red.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
		margin-top: 50px;
	}

	.achievement>>>.el-dialog__body .text.item {
		padding: 22%;
		font-size: 1.5em;
	}

	.achievement>>>.el-dialog__body button {
		margin-top: 10px !important;
		margin-right: 10%;
		float: right;
	}
	
	.el-aside{
		border-left:1px solid #00FFFF;
	}
	
	.wrap{
		padding:45px;
		font-size:18px;
	}
	
	ul li{
		list-style: none;
	}
	
	.green{
		color: #00FF00;
		display: inline-block;
	}
	.red{
		color: #FF0000;
		display: inline-block;
	}
</style>
